<template>
  <view class="grid-container">
    <u-grid :col="5" :border="true">
      <u-grid-item v-for="(item, index) in gridItems" :key="index">
        <view class="grid-item">
          {{ item }}
        </view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Example list of grid items (10 items for 2 rows with 5 items each)
      gridItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 
                  'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10']
    };
  }
};
</script>

<style scoped>
.grid-container {
  height: 300px;  /* Set the height to fit exactly two rows */
  overflow-y: hidden;  /* Disable vertical scrolling */
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;  /* Set item height to fit 2 rows in the container */
  background-color: #f5f5f5;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>
